<template>
    <div class="logo-container" >
        <Transition name="logo">
            <!-- <div :style="{height:props.aHeight +'px',width:aWidth+'px'}"> -->
            <div v-if="!aIsCollapse" class="wrap" >
                <router-link  class="h-full w-full flex items-center justify-center" to="/">
                <!-- <img :src="logo" class="w-5 h-5" /> -->
                <img :src="aLogoUrl" class="w-5 h-5" />
                
                <span class="ml-3 text-white text-sm font-bold">
                    {{ aTitle }}</span
                >
           
            </router-link>
            </div>

            <div v-else class="wrap" >
                <router-link  class="h-full w-full flex items-center justify-center" to="/">
                <!-- <img :src="logo" class="w-5 h-5" /> -->
                <img :src="aLogoUrl" class="w-5 h-5" />
                
            
            </router-link>
            </div>
        </Transition>
            
        
    </div>
</template>
<script setup lang='ts'>
    //#region defineXxx
    defineOptions({
        name:'logo'
    });

    const props=defineProps({
        aHeight:{
            type:Number,
            default:50
        },
        aWidth:{
            type:Number,
            default:100
        },
        aLogoUrl:{
            type:String,
            default:'/vite.svg'
        },
        aIsShowText:{
            type:Boolean,
            default:true
        },
        aTitle:{
            type:String,
            default:'LogoText'
        },
        aIsCollapse:{
            type:Boolean,
            default:false,
        }
        // propC:{
        //     type:String as PropType<MyType>,
        //     required:true
        // },
    });

    const emit = defineEmits<{
        event1:[para1:number,para2:string],
        event2:[para1:number,para2:string],
    }>();
    //#endregion
    
    
</script>
<style lang='less' scoped>
.logo-container{
    width: 100%;
    background: #314155;
    // background: var(--el-bg-color-overlay);
    // width: $sideBarHideWidth !important;
    // transition: all 1s ease;
    text-align: center;
    height: 1.5em;
}
.wrap{
    position: absolute;
    width: 100%;
}

img{
    width: 1.25em;
    height: 1.25em;
}

span{
    color:white;
    font-size:1em;
    font-weight: bold;
    margin-left: 5px;
}
.logo-enter-active,
.logo-leave-active 
{
  transition: all 2s ease;
}

.logo-enter-from,
.logo-leave-to {
  opacity: 0;
//   position: absolute;
}
.logo-leave-from{
    
}

</style>